<script>
import { gsap,} from 'gsap';

import { ScrollTrigger } from "gsap/ScrollTrigger";
export default{
    methods:{
        show(){
             gsap.registerPlugin(ScrollTrigger)
             ScrollTrigger.create({
             trigger:'.boxfour',
              start:'top top',
              end:'+=2000',
              scrub:true,
             pin:true,
            //  markers:true,
             animation:gsap.timeline()
             .to('.box1',{x:0,y:80,scale:0.8},'<')
             .fromTo('.box2',{opacity:0},{x:395,opacity:1},'<')
             })
        }
    },
    mounted(){
        this.show()
    }
}
</script>
<template>
    <div class="boxfour">
        <div class="box1">
              <el-carousel class="pc"  :interval="2000" arrow="never" height="100%">
                <el-carousel-item >
                  <img src="../assets/1.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item >
                  <img src="../assets/2.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item >
                  <img src="../assets/3.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item >
                  <img src="../assets/4.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item >
                  <img src="../assets/2.jpg" alt="">
                </el-carousel-item>
              </el-carousel>
        </div>
        <p class="box2">calling all autobots</p>
    </div>
</template>
<style lang="less" scoped>
.boxfour{
    position: relative;
    // background-color: #140e0e;
    .box1{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 12px !important;
        .pc{
            width: 100% !important;
            border-radius: 12px !important;
            height: 100% !important;
            img{
                width: 100%;
                height: 100%;
                border-radius: 12px !important;
            }

        }
    }
    .box2{
        font-size: 80px;
        font-family: "Helvetica Neue", "Arial", sans-serif;
        font-style: italic;
        font-weight: 100;
        background-image: linear-gradient(to right, #268c95, #1c28c3); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        top: 40px;
        opacity: 0;
    }
}
</style>